<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { useRouterStore } from '@/stores/router'
import { userAvatarMap } from '../userAvatar'

const router = useRouter()
const routeStore = useRouterStore()
const userStore = useUserStore()

const props = defineProps<{
    open: boolean
    avatar: string
    userInfo: any
}>()

const emit = defineEmits<{
    (e: 'closeProcessor'): void
    (e: 'confirmProcessor', userInfo: any): void
    (e: 'openAvatarDialog', avatar: string): void
}>()

// 用户编辑信息
const userFrom = reactive({
    account: '',
    avatar: '',
    nickName: '',
    signature: '',
    birthday: '',
})

const open = ref<boolean>(props.open)
watch(
    () => props.open,
    (isOpen) => {
        open.value = isOpen
    },
    { immediate: true },
)

watch(
    () => props.avatar,
    (avatar) => {
        Object.assign(userFrom, { avatar })
    },
    { immediate: true },
)

watch(
    () => props.userInfo,
    (userInfo) => {
        // console.log('🌈 —— data-userInfo --->', userInfo)
        Object.assign(userFrom, userInfo)
    },
    { immediate: true, deep: true },
)

const handleExit = () => {
    emit('closeProcessor')
    // 清除用户信息
    userStore.resetStore()
    routeStore.deleteActiveRoute(router)
}
</script>

<template>
    <ElDialog
        v-model="open"
        title="个人信息设置"
        width="50%"
        class="user-update-info-dialog-component"
        @close="emit('closeProcessor')"
    >
        <div class="one-container">
            <ElForm
                :model="userFrom"
                style="width: 70%; margin: 0 auto"
                label-width="70"
                label-position="left"
            >
                <div class="avatar-row">
                    <div
                        class="avatar-edit"
                        @click="emit('openAvatarDialog', userFrom.avatar)"
                    >
                        <ElAvatar
                            :src="userAvatarMap[userFrom.avatar as '1']"
                            :size="70"
                            fit="cover"
                        ></ElAvatar>
                        <div class="avatar-edit-post">
                            <ElIcon>
                                <Plus />
                            </ElIcon>
                        </div>
                    </div>
                </div>
                <ElFormItem label="账号">
                    <ElInput
                        v-model="userFrom.account"
                        disabled
                        style="width: 100%"
                    ></ElInput>
                </ElFormItem>
                <ElFormItem label="昵称">
                    <ElInput
                        v-model="userFrom.nickName"
                        style="width: 100%"
                        placeholder="取一个自己喜欢的名称吧。"
                        maxlength="12"
                        show-word-limit
                    ></ElInput>
                </ElFormItem>
                <ElFormItem label="签名">
                    <ElInput
                        v-model="userFrom.signature"
                        style="width: 100%"
                        placeholder="编辑个签，展示我的独特态度"
                        maxlength="40"
                        show-word-limit
                    ></ElInput>
                </ElFormItem>
                <ElFormItem label="生日">
                    <el-date-picker
                        v-model="userFrom.birthday"
                        type="date"
                        placeholder="设置生日"
                        style="width: 100%"
                        value-format="YYYY-MM-DD"
                    />
                </ElFormItem>
            </ElForm>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <ElPopconfirm title="是否登出？" @confirm="handleExit">
                    <template #reference>
                        <el-button type="danger">登出</el-button>
                    </template>
                </ElPopconfirm>

                <el-button @click="emit('closeProcessor')">取消</el-button>
                <el-button
                    type="primary"
                    @click="emit('confirmProcessor', userFrom)"
                >
                    确定
                </el-button>
            </div>
        </template>
    </ElDialog>
</template>

<style scoped lang="scss">
.user-update-info-dialog-component {
    .one-container {
        width: 100%;
        height: 300px;

        .avatar-row {
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: center;
            margin-bottom: 15px;

            .avatar-edit {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                cursor: pointer;
                position: relative;

                &:hover .avatar-edit-post {
                    visibility: visible;
                }

                .avatar-edit-post {
                    width: inherit;
                    height: inherit;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 20px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, 0.6);
                    visibility: hidden;
                }
            }
        }
    }
}
</style>
